<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="./include/tag.jsp" %>

<!DOCTYPE html>
<html lang="zh">
<head>
    <title>购买</title>
    <link rel="stylesheet" href="${ctx}/css/ui/about.css">
    <%@include file="./include/commonFile.jsp" %>
</head>
<body>
<!--头部-->
<%@include file="./include/header1.jsp" %>

<!--内容-->
<div class="g-box ctn-mn wow fadeIn buy">
    <div class="m-ct-hd">
        <div class="hd-inner">
            <h1 class="hd-tt buy-tt">服务订购</h1>
            <div><i></i><img src="${ctx}/image/favicon.ico" alt=""><i></i></div>
        </div>
    </div>
    <div class="buy-btn">
        <ul>
            <li class="active btn1"><div>社群系统</div></li>
            <li class="btn2"><div>众筹系统</div></li>
        </ul>
    </div>
</div>

<div class="buy-bd g-box bg-white">
    <div>
        <div class="ctn-mn wow fadeIn">
            <div class="hd-inner">
                <h1 class="hd-tt buy-tt">强大的社群技术管理平台</h1>
                <div><i></i><img src="${ctx}/image/favicon.ico" alt=""><i></i></div>
                <p class="hd-sub-tt">提供标准化、规范化、智能化、数据化，可复制的社群运营管理工具，共同挖掘社群红利</p>
            </div>
        </div>
        <div>
            <img class="buy-img" src="${ctx}/image/buy/social.jpg" alt="">
        </div>
        <ul class="cost">
            <li>
                <div class="f18">￥998/年</div>
                <p class="f14">签约1年，无优惠</p>
            </li>
            <li>
                <div class="f18">￥1688/2年</div>
                <p>一次性签约2年，优惠308元</p>
            </li>
            <li>
                <div class="f18">￥1988/3年</div>
                <p>一次性签约3年，优惠1006元</p>
            </li>
        </ul>
        <div class="buy-connect">
            <div class="connect-box">
                <img src="${ctx}/image/buy/phone.png" alt="">
                <p class="f20">如何购买最划算最合适？</p>
                <div>4008-771-663</div>
            </div>
            <div class="connect-box">
                <div class="kf-box">
                    <img class="qrcode" src="${ctx}/image/k-qrcode.png" alt="">
                </div>
                <c:if test="${!sessionScope.newCurrentUser.child}">
                    <div style="box-shadow:0 0 0 0; border-radius: 10px;">
                        <a class="layui-btn layui-btn-danger" style="width: 100%; line-height: 35px; font-size: 13px; border-radius: 5px;"
                           href="javascript:immediatelyBuy()">立即购买</a>
                    </div>
                </c:if>
            </div>
        </div>
    </div>

    <div id="connect1">
        <div class="ctn-mn wow fadeIn">
            <div class="hd-inner">
                <h1 class="hd-tt buy-tt">强大的社群众筹赛事系统</h1>
                <div><i></i><img src="${ctx}/image/favicon.ico" alt=""><i></i></div>
                <p class="hd-sub-tt">通过众筹的方式获取活动的参赛资格，引爆高端社群的裂变传播，带来高传播+高品质+高口碑的营销事件</p>
            </div>
        </div>
        <div>
            <img class="buy-img" src="${ctx}/image/buy/match.jpg" alt="">
        </div>
        <ul class="cost">
            <li>
            <div class="f18">￥3000/1年</div>
            <p class="f14">签约1年，无优惠</p>
            </li>
            <li>
                <div class="f18">￥5000/2年</div>
                <p>一次性签约2年，优惠1000元</p>
            </li>
            <li>
                <div class="f18">￥6600/3年</div>
                <p>一次性签约3年，优惠2400元</p>
            </li>
        </ul>
        <div class="buy-connect">
            <div class="connect-box">
                <img src="${ctx}/image/buy/phone.png" alt="">
                <p class="f20">如何购买最划算最合适？</p>
                <div>4008-771-663</div>
            </div>
            <div class="connect-box">
                <div class="kf-box">
                    <img class="qrcode" src="${ctx}/image/k-qrcode.png" alt="">
                </div>
                <c:if test="${!sessionScope.newCurrentUser.child}">
                    <div style="box-shadow:0 0 0 0; border-radius: 10px;">
                        <a class="layui-btn layui-btn-danger" style="width: 100%; line-height: 35px; font-size: 13px; border-radius: 5px;"
                           href="javascript:immediatelyBuy()">立即购买</a>
                    </div>
                </c:if>
            </div>
        </div>
    </div>
</div>
<!--底部-->
<%@include file="./include/footer1.jsp" %>
<script>
    var headNavIdx = 2
    $('.buy-btn li').click(function(){
        // if ($(this).hasClass('active')){
        //     return
        // }
        $(this).addClass('active').siblings('li').removeClass('active')
        if ($(this).hasClass('btn1')){
            $('#connect1').hide().siblings('div').show()
        }else {
            $('#connect1').show().siblings('div').hide()
        }
    })

    var type = location.search.split('=')[1];
    if (type == 2) {
        $('.buy-btn li:nth-child(2)').click()
    } else {
        $('.buy-btn li:nth-child(1)').click()
    }

    function immediatelyBuy() {
        var storage = localStorage;
        var type =  $('.active').attr('value')
        $.post("${ctx}/about/immediatelyBuyJump.do", {
            type: type
        }, function (data) {
            storage.setItem('clickType', 'register_btn');
            if (data.success) {
                window.location.href="${ctx}"+data.description;
            } else {
                window.location.href="${ctx}"+"/pLogin.do";
            }
        });
    }
</script>
</body>
</html>